<script setup type="text/javascript" lang="ts">
import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import type {
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineSeriesOption
} from 'echarts/charts';
import type {
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption
} from 'echarts/components';
import type {
  ComposeOption,
} from 'echarts/core';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

import { onMounted, ref } from 'vue';
import { PieChart } from 'echarts/charts';
import { studentCountData, studentDegreeData } from '@/api/report/stuReport'
echarts.use([GridComponent, BarChart, PieChart, CanvasRenderer, TitleComponent]);

const chartDom1 = ref(null);
const chartDom2 = ref(null);
let myChart1: echarts.ECharts | null = null;
let myChart2: echarts.ECharts | null = null;

// 定义option为一个普通的JavaScript对象，不需要是响应式的  
const option1 = {
  title: {
    text: '班级人数统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  // ... 其他配置项 ...  
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: []
    }
  ]
};


const option2 = {
  title: {
    text: '学员学历统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 0, name: ' ' },

      ]
    }
  ]
};

async function query() {
  const studentCount = await studentCountData();
  const studentDegree = await studentDegreeData();
  return { studentCount, studentDegree }
}


onMounted(async () => {
  chartDom1.value = document.getElementById('main1');
  if (chartDom1.value) {
    myChart1 = echarts.init(chartDom1.value);
    myChart1.setOption(option1);
  }
  chartDom2.value = document.getElementById('main2');
  if (chartDom2.value) {
    myChart2 = echarts.init(chartDom2.value);
    myChart2.setOption(option2);
  }

  const { studentCount, studentDegree } = await query();



  option1.xAxis[0].data = studentCount.data.clazzList;
  option1.series[0].data = studentCount.data.dataList;
  myChart1.setOption(option1); // 使用更新后的数据重新设置图表选项





  if (Array.isArray(studentDegree.data)) {
    option2.series[0].data = studentDegree.data.map(item => ({
      value: item.value, // 饼图数据通常需要 value
      name: item.name // 饼图数据通常需要 name
    }));
    myChart2.setOption(option2); // 使用更新后的数据重新设置图表选项
  }



});


</script>

<template>
  <div>
    <div class="chart-container" ref="chartDom1" id="main1" style="width: 500px;height:600px;"></div>
    <div class="chart-container" ref="chartDom2" id="main2" style="width: 500px;height:600px;"></div>
  </div>
</template>

<style scoped>
/* 设置容器的样式 */
.chart-container {

  display: inline-block;
  /* 使其并排显示 */


}
</style>